<template>
	<view class="container">
		<NavBar title="发表文章"></NavBar>
		<view class="formWrap">
			<u--form
			  :model="form"
			  ref="uForm"
			  :rules="rules"
			  labelPosition="left"
			  labelWidth="160rpx"
			  :labelStyle="{color:'rgb(31,182,131)',fontWeight:'bold'}"
			>
				<u-form-item label="文章标题:"  prop="title" required borderBottom>
				     <u-input v-model="form.title"  placeholder="请输入文章标题" border="none" />
				</u-form-item>
				<u-form-item label="所属专栏:" @click="showPicker = true"  prop="catalog" required borderBottom>
						<u-input v-model="labelPicker"
								placeholder="请选择文章所属专栏" 
								border="none"
								disabled
								disabledColor="#ffffff"/>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
				</u-form-item>
				<u-form-item  prop="content" >
					<Editor :editorContent="editorContent"></Editor>
				</u-form-item>
				<u-form-item label="验证码:"  prop="code" required >
					<u-input v-model="form.code" placeholder="请输入验证码" border="bottom"/>
					</u-input>
					<view slot="right" class="codeWrap"  @click="refreshCode">
						<mp-html class="code" :content="svg"></mp-html>
						<text class="change">换一张</text>
					</view>
				</u-form-item>
			</u--form>
			<u-button type="success" text="发表" @click="submit"></u-button>
			<u-picker 
			    :show="showPicker" 
			    :columns="columns" 
			    cancelText="取消"
			    cancelColor="#5555"
			    confirmText="确认"
			    confirmColor="rgb(31, 182, 131)"
			    visibleItemCount="5"
			    keyName="label"
			    :closeOnClickOverlay="true"
				@confirm="confirmPicker"
				@cancel="closePicker"
			    >
			</u-picker>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	import {checkToken} from '@/common/checkAuth'
	export default {
		data() {
			return {
				form:{
					title:'',
					catalog:'',
					content:'',
					code:''
				},
				svg:'',
				rules:{
					title:{
						type:'string',
						required:true,
						message:'请输入文章标题',
						trigger: ['change', 'blur']
					},
					catalog:{
						required: true,
						message: '请选择文章所属专栏',
						trigger: ['blur', 'change']
					},
					content:{
						type:'string',
						required:true,
						message:'请输入文章内容',
						trigger: ['change', 'blur']
					},
					code:{
						type:'string',
						required:true,
						len:4,
						message:'请填写4位验证码',
						trigger: ['change', 'blur']
					}
				},
				showPicker: false,
				labelPicker:'',
				columns:[
				  [{
				    label: '提问',
				    catalog: 'ask'
				  },
				  {
				    label: '分享',
				    catalog: 'share'
				  }]
				],
				isEditPost: false,
				id: '',
				fav: 0,
				editorContent: ''
			}
		},
		computed:{
			sid(){
				return this.$store.state.auth.sid
			}
		},
		onShow(){
			if(checkToken('/pages/Home/Home')){
				if(!this.sid){
					this.$store.commit('setSid',uni.$u.guid(26))
				}
				this.getCaptcha()
				uni.$on('giveContent',this.getContent)
				uni.$on('givePost',this.getPost)
			}
		},
		onUnload(){
			uni.$off('giveContent',this.getContent)
			uni.$off('givePost',this.getPost)
		},
		methods:{
			async getCaptcha(){
				const {code,data} = await this.$axios.api.getCaptcha({sid:this.sid})
				if(code === 200){
					this.svg = data 
				}
			},
			getPost(data){
				if(data.isEditPost){
					const {title,content,catalog,isEditPost,_id} = data
					this.form.title = title
					this.labelPicker = catalog
					this.form.catalog = catalog
					this.form.content = content
					this.editorContent = content
					this.isEditPost = isEditPost
					this.id = _id
					switch (catalog){
						case '提问':
							this.form.catalog = 'ask'
							break;
						case '分享':
							this.form.catalog = 'share'
							break;
					}
				}
			},
			refreshCode(){
				this.getCaptcha()
			},
			getContent(val){
				this.form.content = val
			},
			confirmPicker(e){
				this.form.catalog = e.value[0].catalog
				this.labelPicker = e.value[0].label
				this.showPicker = false
			},
			closePicker(){
				this.showPicker = false
			},
			submit(){
				this.$refs.uForm.validate().then(async res=>{
					const {code,data,msg} = await this.$axios.api.addPost({
						title: this.form.title,
						content: this.form.content,
						catalog: this.form.catalog,
						code: this.form.code,
						sid: this.sid,
						isEditPost: this.isEditPost,
						fav: this.fav,
						id: this.id
					})
					if(code === 200){
						uni.showToast({
							title:'发表成功',
							icon:'success',
							duration:2000
						})
						uni.$emit('reloadPost',true)
						uni.switchTab({
						    url: '/pages/Home/Home'
						})
					}else if(code === 401){
						uni.showToast({
							title:msg,
							icon:'none',
							duration:2000
						})
					}else if(code === 500){
						uni.showToast({
							title:msg,
							icon:'none',
							duration:2000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
/* #ifdef MP-WEIXIN */
::v-deep editor{
	border: 1px solid $u-success;
	height: auto;
}
/* #endif */
.container{
	height: 100%;
	display: flex;
	flex-direction: column;
	.formWrap{
		width: 100%;
		flex: 1;
		padding: 60rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.codeWrap{
			display: flex;
			flex-direction: column;
			align-items: center;
			.code{
				width: 180rpx;
				line-height: 60rpx;
			}
			.change{
				color: $u-success;
			}
		}
	}
}
</style>
